<template>
    <div class="my-collection-wrapper">
        <van-tabs v-model="tabActive" :color="'#0085ca'" @click="tabClick">
          <van-tab title="精彩回放">
            <div class="my-collection-list padding-12">
              <van-list
                v-model="videoIsUploading"
                :finished="videoIsUpfinished"
                :finished-text=" videoList.length === 0 ? '暂无收藏' : '没有更多了' "
                @load="videoOnLoad"
              >
                <van-row gutter="12">
                  <van-col span="12" v-for="(item,index) in videoList" :key="index" class="index-list">
                    <router-link :to="{path:baseUrl.video,query:{id:item.id}}">
                      <div class="mime-video-list-container">
                        <div class="mime-video-list-img border-radius5">
                          <img :src="baseUrl.CDNimgUrl + item.image">
                          <template>
                            <span v-if="item.count <= 1">{{item.timer}}</span>
                            <span v-else>共{{item.count}}集</span>
                          </template>
                        </div>
                        <div class="mime-video-list-content">
                          <h4 class="mime-video-list-content-title">{{item.title}}</h4>
                          <van-row>
                            <van-col span='12' class="van-ellipsis">
                              <p>{{item.doctor}}</p>
                            </van-col>
                            <van-col span='12' class="text-align-r">
                              <p>
                                <label class="list-icon-see info-list-icon-see"></label>
                                {{item.clicks > 9999 ? (item.clicks/10000).toFixed(1)+'万' : item.clicks}}人观看
                              </p>
                            </van-col>
                          </van-row>
                        </div>
                      </div>
                    </router-link>
                  </van-col>
                </van-row>
              </van-list>
            </div>
          </van-tab>
          <van-tab title="病例解读">
            <div class="my-collection-list padding-12">
              <van-list
                v-model="infoIsUploading"
                :finished="infoIsUpfinished"
                :finished-text=" infoList.length === 0 ? '暂无收藏' : '没有更多了' "
                @load="infoOnLoad"
              >
                <van-row v-for="(item,index) in infoList" :key="index" class="index-list info-list">
                  <router-link :to="{path:baseUrl.info,query:{id:item.id}}">
                    <van-col span="16">
                      <div class="display-table">
                        <div class="display-table-cell">
                          <h4>{{item.title}}</h4>
                          <van-row>
                            <van-col span='12' class="van-ellipsis">
                              <p>主讲专家：{{item.doctor}}</p>
                            </van-col>
                            <van-col span='12' class='text-align-r'>
                              <p>
                                <label class="list-icon-see info-list-icon-see"></label>
                                {{item.clicks > 9999 ? (item.clicks/10000).toFixed(1)+'万' : item.clicks}}人阅读
                              </p>
                            </van-col>
                          </van-row>
                        </div>
                      </div>
                    </van-col>
                    <van-col span="7" offset="1" class="text-align-r">
                      <div class="mime-info-list-img border-radius5">
                        <img :src="baseUrl.CDNimgUrl + item.image">
                      </div>
                    </van-col>
                  </router-link>
                </van-row>
              </van-list>
            </div>
          </van-tab>
        </van-tabs>
    </div>
</template>

<script>
  import ajax from '../../module/ajax/public'
  import { List, Row, Col,Tab, Tabs } from 'vant'

  export default {
      name: "MyCollection",
      components:{
        // FooterNav,
        [List.name]: List,
        [Row.name]: Row,
        [Col.name]: Col,
        [Tab.name]: Tab,
        [Tabs.name]: Tabs,
      },
      data(){
        return{
          tabActive:0,
          videoPage:0,
          infoPage:0,
          baseUrl: {
            'info': '/mime-info-detail',
            'video': 'mime-video-detail',
            'CDNimgUrl': this.GLOBAL.CDNimgUrl,
          },
          videoList:[],
          videoIsUploading: false,
          videoIsUpfinished:false,
          infoList:[],
          infoIsUploading: false,
          infoIsUpfinished:false,
          type:['course','cases'],
          tabIndex:0
        }
    },
      methods:{
        getVideoData(){
          this.videoPage++;
          ajax.doAction({
            url: `/user/collects?page=${this.videoPage}&type=${this.type[this.tabIndex]}`,
            type: 'POST',
            successCallback:(data)=>{
              // console.log(data)
              let datas = data.data
              this.videoIsUploading = false
              if(datas.length >0){
                this.videoList = this.videoList.concat(datas);
              }else{
                this.videoIsUpfinished = true;
              }
            },
            errorCallback: (data)=> {
              console.log('请求失败');
            }
          });
        },
        getInfoData(){
          this.infoPage++;
          ajax.doAction({
            url: `/user/collects?page=${this.infoPage}&type=${this.type[this.tabIndex]}`,
            type: 'POST',
            successCallback:(data)=>{
              // console.log(data)
              let datas = data.data
              this.infoIsUploading = false
              if(datas.length >0){
                this.infoList = this.infoList.concat(datas);
              }else{
                this.infoIsUpfinished = true;
              }
            },
            errorCallback: (data)=> {
              console.log('请求失败');
            }
          });
        },
        videoOnLoad(){
          this.getVideoData();
        },
        infoOnLoad(){
          this.getInfoData();
        },
        tabClick(index){
          this.tabIndex = index
          // console.log(this.tabIndex)
          this.videoPage = 0
          this.infoPage = 0
          this.videoIsUploading = true
          this.videoIsUpfinished = false
          this.infoIsUploading = true
          this.infoIsUpfinished= false
          this.videoList = []
          this.infoList = []
          this.getVideoData()
          this.getInfoData()
        }
      }
    }
</script>

<style>

</style>
